<template>
  <el-dialog
    :title="title"
    :visible.sync="openSheet"
    width="800px"
    :destroy-on-close="true"
    :close-on-click-modal="false"
  >
    <div class="inline-block-no-wrap">
      {{ $t('holidayTag') }}<div class="box isHoliday" />
      {{ $t('workdayTag') }}<div class="box isWorkday" />
    </div>
    <el-date-picker v-model="selectDate" type="month" :placeholder="$t('calendarChooseMonth')" />

    <el-calendar v-model="selectDate">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div class="wrap" :class="dateTypeClass(data)" @dblclick="handleDoubleClick(date, data)">
          <p>
            {{ data.day.split("-").slice(2).join("") }}<br>
          </p>
        </div>
      </template>
    </el-calendar>
  </el-dialog>
</template>

<script>
import { getCalendarApi, updateCalendarApi } from '../api/calendars.api'
export default {
  name: 'CalendarAdjust',
  data() {
    return {
      openSheet: false,
      title: undefined,
      monthData: [],
      selectDate: undefined,
      year: undefined,
      month: undefined,
      calendarType: undefined
    };
  },
  watch: {
    async selectDate(newVal, oldVal) {
      this.year = newVal.getFullYear();
      this.month = newVal.getMonth() + 1;
      await this.getCalendarData()
    }
  },
  methods: {
    async openSheetDialog(data) {
      this.title = this.$t('calendarAdjustTitle')
      this.openSheet = !this.openSheet;
      this.selectDate = new Date()
      this.year = this.selectDate.getFullYear()
      this.month = this.selectDate.getMonth() + 1
      this.calendarType = data.calendar_type
      await this.getCalendarData()
    },
    async getCalendarData() {
      var params = { calendar_type: this.calendarType, year: this.year, month: this.month }
      var resp = await getCalendarApi(params)
      if (resp.success) {
        this.monthData = resp.data
      } else {
        this.targaMessageBox(this, resp.msg)
      }
    },
    async updateCalendar(clickDate) {
      var data = { 'calendar_type': this.calendarType, 'click_date': clickDate }
      var resp = await updateCalendarApi(data)
      if (resp.success) {
        await this.getCalendarData()
      } else {
        this.targaMessageBox(this, resp.msg)
      }
    },
    async handleDoubleClick(date, data) {
      await this.updateCalendar(data.day)
    },
    dateTypeClass(data) {
      const result = this.monthData.find(item => item.date === data.day)
      if (result) {
        if (result.holiday === 'W') {
          return 'isWorkday'
        } else {
          return 'isHoliday'
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.inline-block-no-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.box {
  width: 50px;
  height: 25px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-right: 20px;
  display: inline-block;
  }
.isWorkday {
  background: rgb(241, 255, 238);
}
.isHoliday {
  background: rgb(255, 200, 200);
}
// ::v-deep .el-calendar {
//   .el-calendar-table td.is-selected {
//     .wrap {
//       background-color: rgb(196, 216, 254)!important;
//     }
//   }
// }
::v-deep .el-calendar__header {
    padding: 0px 0px 10px 0px;
}
::v-deep .el-calendar-table .el-calendar-day{
    padding: 0;
    .wrap {
        height: 100%;
        padding: 12px;
        position: relative;
    }
    .isWorkday {
        background: rgb(241, 255, 238);
    }
    .isHoliday {
        background: rgb(255, 200, 200);
    }
}
::v-deep .el-calendar__body {
    border-top: 1px solid #ebeef5;
    p {
        text-align: center;
        font-size: large;
    }
}

::v-deep .el-calendar__header {
    justify-content: flex-end;
    border-bottom: 0px solid #ebeef5;
    .el-calendar__title {
        display: none;
    }
}

::v-deep .el-input__inner {
    line-height: 28px;
    height: 28px;
    width: 100%;
}

::v-deep .el-date-editor.el-input {
    width: 30%;
    float: left;
    .el-input__icon {
        line-height: 28px;
    }
}

::v-deep .el-input--suffix .el-input__inner {
    padding-right: 0px;
}

::v-deep .el-input__suffix {
    display: none;
}

</style>
